<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>消息列表</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/bootstrap.min.css">
    <script type="text/javascript" src="__JS__/jquery.min.js"></script>
    <script type="text/javascript" src="__JS__/layer.js"></script>
    <style type="text/css">
        .content{
            padding:20px;background-color: white;font-size: 15px;
        }
        .span_ico{
            display: inline-block;
            padding-right: 10px;
            color: rgb(66, 185, 131);
        }
        .span_tie{
            display: inline-block;height: 18px;color:grey;
        }
        .span_time{
            float: right;color: grey;
        }
        .huifu{
            padding: 0px 20px 10px 0px;
        }
        .comment{
            padding: 10px;background-color: #F2F2F2;
        }
        .font-color{
            color: rgba(0, 0, 0, 0.8);
        }
        .left-span{
            height: 18px;
            min-width: 18px;
            padding: 2px 4px 2px 5px;
            color: rgb(255, 255, 255);
            border-radius: 20px;
            position: absolute;
            font-size: 10px;
            top: -7px;
            left: 67px;
            background-color: rgb(239, 64, 86);
            display: inline-block;
        }
        html { overflow: scroll; }
        .navbar_bottom_container{text-align: center;padding-top:10px;}
        .navbar_bottom_container span{font-size: 20px;display: inline-block;width:30%;}
    </style>
</head>
<body style="background-color:#F2F2F2;height: 100%;padding-bottom: 60px;">
<input type="hidden" name="pagenum" value="1" id="pagenum">
<input type="hidden" name="totalpage" value="<?php echo $totalpage;?>" id="totalpage">
      <div class="news_tie  container_center" >
      </div>
       <div id="nextpage" style="width:100px;height:40px;margin-left:auto;margin-right:auto">
           <button style="float:left;margin-top:10px;" class="btn btn-success" id="more">加载更多</button>
       </div>
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container navbar_bottom_container">
        <span class="glyphicon glyphicon-home" aria-hidden="true" onclick="home();"></span>
        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true" onclick="publish()"></span>
        <span class="glyphicon glyphicon-user" aria-hidden="true" onclick="ucenter();"></span>
    </div>
</nav>
</body>
<script type="text/javascript">
    function dataajax() {
        var pagenum =   $('#pagenum').val();    //当前 “最新”帖子 的分页number
        $.ajax({
            type:'get',
            url:"{:U('Home/Index/ajax_notify')}",
            data:{pagenum:pagenum},
            dataType:'html',
            success:function(html){
                $('.news_tie').append(html);
            }
        });
    }
    //点击 导航条的 主页
    function home(){
        location.href="{:U('Home/Index/index')}";
    }
    //点击 导航条的 发布按钮
    function publish(){
        location.href="{:U('Home/Index/publish')}";
    }
    //点击 导航条的 个人中心
    function ucenter(){
        location.href="{:U('Home/Index/ucenter')}";
    }
   $(function () {
       dataajax();
       $("#more").click(function(){
           var pagenum = parseInt($('#pagenum').val());
           var nextpage = eval(pagenum+1);
           var totalpage = parseInt($('#totalpage').val());

           if(pagenum>=totalpage){
               //提示当前 “最新”帖子已到 最后一页了
               layer.open({
                   content: '当前已到最后一页了哟！！！'
                   ,skin: 'msg'
                   ,time: 3 //2秒后自动关闭
               });
           }else{
               $('#pagenum').val(nextpage);
               dataajax();
           }
       })
   })
</script>
</html>